<template>
  <div class="topCon">
    <el-row>
      <el-col
        class="topTitle titleBoxColor"
        :class="{ noExplain: !titleExplain }"
      >
        <!-- <i class="icon iconfont iconfanhui1" @click="goBack"></i> -->
        <h2>
          <i
            class="icon iconfont iconfanhui1"
            v-show="back"
            @click="goBackOne"
          ></i>
          {{ titleText }}
          <slot></slot>
          <span
            v-show="status"
            :class="[
              'startStatus',
              {
                noStart: status === '未开工',
                startStop: status === '已停工',
                startOver: status === '已竣工',
                startFinished: status === '已完工',
              },
            ]"
            >{{ status }}</span
          >
        </h2>
        <p v-show="titleExplain" :class="back ? 'paddingLeft28' : ''">
          {{ titleExplain }}
        </p>
        <span v-if="dateStr" class="dateShow">更新时间：{{ dateStr }}</span>
        <el-button
          :disabled="isDisabled"
          type="primary"
          class="commonBut saveBtn funComBut addbtn"
          icon="icon iconfont icontianjia"
          @click="skip"
          v-if="btnText && isShowBtn"
        >
          <span class="opetareText">{{ btnText }}</span>
        </el-button>
        <el-link
          class="links"
          type="primary"
          v-if="showLink"
          @click="handleBackLink"
          >{{ linkText }}</el-link
        >
        <el-button
          v-if="showEdit"
          type="primary"
          class="commonBut saveBtn funComBut edit"
          size="small"
          icon="icon iconfont iconbianji"
          @click="$emit('editBack')"
        >
          <span class="opetareText">修改</span>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isDisabled: false, //如有引导页的时候禁止点击
    }
  },
  //搜索条件
  props: [
    'titleText',
    'titleExplain',
    'back',
    'dateStr',
    'pathUrl',
    'btnText',
    'isShowBtn',
    'oldUrl',
    'isDisabled',
    'status',
    'showEdit',
  ],
  mounted() {},
  computed: {},
  methods: {
    goBackOne() {
      this.$emit('gobackTriser')
    },
    skip() {
      this.$router.push(this.pathUrl)
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: this.oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    handleBackLink() {
      this.$emit('linkClick')
    },
  },
}
</script>
<style scoped lang="less">
.topTitle {
  // background: #e4ebf1;
  // height: 93px;
  padding: 16px 24px;
  position: relative;
  h2 {
    font-size: 18px;
    line-height: 18px;
    color: #333333;
    font-weight: bold;
    .iconfanhui1 {
      font-size: 18px;
      margin-right: 6px;
      cursor: pointer;
    }
  }
  p {
    font-size: 14px;
    line-height: 14px;
    margin-top: 10px;
    color: #666666;
    position: relative;
    &:after {
      position: absolute;
      right: -24px;
      top: 30px;
      left: -24px;
      height: 1px;
      content: '';
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      z-index: 10;
    }
  }
  .paddingLeft28 {
    padding-left: 28px;
  }
  .addbtn {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
  }
  .btn {
    width: 136px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #009588;
    border-radius: 21px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    background: #009588;
    padding: 0;
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
  }
  .btn:hover {
    background: #009588;
    border: 1px solid #009588;
    opacity: 0.8;
  }
  .edit {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
  }
  .links {
    position: absolute;
    top: 17px;
    right: 24px;
    height: 36px;
    line-height: 36px;
  }
  .dateShow {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 260px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #265faa;
    text-align: center;
    padding: 0;
  }
}

.noExplain {
  padding: 0;
  padding-left: 24px;
  padding-right: 24px;
  height: 50px;
  line-height: 50px;
  h2 {
    //   line-height: 1;
    height: 50px;
    line-height: 50px;
    position: relative;
    &:after {
      position: absolute;
      right: -24px;
      top: 50px;
      left: -24px;
      height: 1px;
      content: '';
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      z-index: 10;
    }
  }
  //   .btn{
  //  top:7px;
  //   }
}
// .startStatus{
//     vertical-align: middle !important;
// }
// .status{
//     display: inline-block;
//     width: 48px;
//     height: 20px;
//     line-height: 20px;
//     // margin-bottom: 10px;
//     background: #265FAA;
//     color: #fff;
//     text-align: center;
//     font-size: 12px;
//     border-radius: 4px;
//     vertical-align: middle;
// }
// .topCon{
//     margin:24px;
// }
</style>
